<template>
    <!-- 准确率审核组件 -->
    <div class = "rightCharts heightbg">
        <div id="wenchaCharts">
            <div class="panel">
                <div class="bestCityTitle">
                    <!--宽窄竖线-->
                    <div class="doubleLine lf">
                        <div class="wide lf"></div>
                        <div class="narrow lf"></div>
                    </div>
                    <!--最优城市-->
                    <div class="bestCityP lf">
                        <div class="bestCityName lf">站点核查 </div>
                    </div>
                </div>
                <div class="threeLine">
                    <div class="firstLine lf"></div>
                    <div class="secondLine lf"></div>
                    <div class="thirdLine lf"></div>
                </div>
                <!-- 下拉菜单 -->
                <div class="xuanze">
                    <div class="">
                        <el-cascader
                                v-model="PlaceValue"
                                :options="options"
                                placeholder="选择、搜索站点"
                                expand-trigger="hover"
                                separator="-"
                                clearable
                                :props="{ checkStrictly: true }"
                                @change="handleChange()"
                           ></el-cascader>
                    </div>
                    <div class="">
                        <el-date-picker
                        v-model="dateValue"
                        type="daterange"
                        value-format="yyyyMMdd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div class="search" @click="toSearch">
                        确定 
                    </div>
                </div>
                <!-- 表格 -->
                <div class="tableHeader" v-show="isTable">
                    <div>ID</div>
                    <div>站点</div>
                    <div>负氧离子</div>
                    <div>温度/最高温度</div>
                    <div>湿度/最大湿度</div> 
                    <div>时间</div>
                    <div>审核状态</div>
                </div>
                <GeminiScrollbar class="my-scroll-bar">
                    <div class="activity "  v-show="isTable"
                    :class="{'height1': $route.path=='/','height2':$route.path.indexOf('station')>0}"
                    >
                        <ul >
                            <li v-for="(item,index) of checkList"  :key="index"
                            :class="{  'font1': item.FYLZState == 1,
                                        'font2': item.FYLZState == 2,
                                    }" 
                            >
                                <div>{{item.StationId}}</div>
                                <div>{{item.StationName}}</div>
                                <div>{{item.negative_K04}}</div>
                                <div>{{item.Temperature + "/" + (item.MaxTemperature==null?"-":item.MaxTemperature)}}</div>
                                <div>{{item.Humidity + "/" + (item.MaxHumidity==null?"-":item.MaxHumidity)}}</div>
                                <div>{{item.Observtime.slice(0,4) + "-" + item.Observtime.slice(4,6) + "-" + item.Observtime.slice(6,8) + " " + item.Observtime.slice(8,10) + ":" + item.Observtime.slice(10,12)}}</div>
                                <div>{{item.FYLZState==0?'正确':''}}{{item.FYLZState==1?'可疑':''}}{{item.FYLZState==2?'错误':''}}</div>
                            </li>
                        </ul>
                    </div>
                </GeminiScrollbar>
                
            </div>
        </div>
    </div> 
</template>
<script>
    import axios from 'axios'
    import LeftContentCity from './rightCharts/LeftContentCity'
    import LeftContentCounty from './rightCharts/LeftContentCounty'
    export default {
        name: 'RightCharts',
        components:{
            LeftContentCity,
            LeftContentCounty
        },
        data(){
            return{
                options: [],
                PlaceValue: [],
                dateValue: [],
                isTable:false,
                count:0,
                checkList:[]
               
            }
        },
        watch:{
            PlaceValue(){
                $('.el-cascader__dropdown').css('display','none');
            }
        },
        methods:{
            handleChange(value) {
                console.log(value);
            },
            toSearch(){
                if(this.dateValue.length==0||this.PlaceValue.length==0){
                    alert('请输入站点和时间')
                }else{
                    this.isTable=true;
                    console.log(this.PlaceValue,this.dateValue)
                    this.getAllData( this.PlaceValue,this.dateValue)
                }
                
            },
            getCityCountyS(){
                if(this.$comjs.isOnline){
                    axios.get('/apis/api/FYLZ/GetCatalogs').then(res=>{
                            this.getList(res)
                        }
                    )
                }else{
                    axios.get(this.$comjs.cityCountyS).then(res=>{
                            this.getList(res)
                        }
                    )
                }
            },
            getList(res){
                var res = res.data;
                let arr = [];
                for(var i=0;i<res.length;i++){
                    arr[i]={};
                    arr[i].value=res[i].Name;
                    arr[i].label=res[i].Name;
                    arr[i].children = [];
                    for(var j=0;j<res[i].Catalogs.length;j++){
                        arr[i].children[j]={};
                        arr[i].children[j].value = res[i].Catalogs[j].Name;
                        arr[i].children[j].label = res[i].Catalogs[j].Name;
                        arr[i].children[j].children = [];
                        for(var k=0;k<res[i].Catalogs[j].Catalogs.length;k++){
                            arr[i].children[j].children[k]={};
                            arr[i].children[j].children[k].value = res[i].Catalogs[j].Catalogs[k].Id;
                            arr[i].children[j].children[k].label = res[i].Catalogs[j].Catalogs[k].Name;
                        }
                    }
                }
                this.options = arr;
            },
            getAllData(place,times){
                if(this.$comjs.isOnline){
                    if(place.length==1){
                        
                        axios.get('/apis/api/FYLZ/GetFYLZs?startTime=' + times[0] +'&endTime='+ times[1] +'&city='+ place[0]).then(res=>{
                                this.getAllDataInfo(res)
                            }
                        )
                    }else if(place.length==2){
                        
                        axios.get('/apis/api/FYLZ/GetFYLZs?startTime=' + times[0] +'&endTime='+ times[1] +'&city='+ place[0] + '&country=' + place[1] ).then(res=>{
                                this.getAllDataInfo(res)
                            }
                        )
                    }else if(place.length==3){
                        
                        axios.get('/apis/api/FYLZ/GetFYLZs?startTime=' + times[0] +'&endTime='+ times[1] +'&city='+ place[0] + '&country=' + place[1] +'&stationId='+ place[2]).then(res=>{
                                this.getAllDataInfo(res)
                            }
                        )
                    }
                    
                }
                else{
                    axios.get(this.$comjs.checkList).then(res=>{
                            this.getAllDataInfo(res)
                        }
                    )
                }
            },
            
            getAllDataInfo(res){
                this.checkList = res.data.reverse();
               
                
            }
        },
        mounted(){
            this.getCityCountyS();
        }
    }
</script>
<style lang="stylus" scoped>
    .activity >>> .el-input__inner
        background : transparent!important
        border : 1px solid rgba(46,100,132,1)!important
    .activity >>> .font1
        background:#FD9800
    .activity >>> .font2
        background:red
    .rightCharts.heightbg
        height:88vh
    .rightCharts >>> .height1
        height:74vh!important
    .rightCharts >>> .height2
        height:61vh!important
    .rightCharts
        width: 10.3rem
        height: 68vh
        position: absolute
        z-index:2
        top: 0
        right: .45rem      
        background :rgba(0,0,0,0.7)
        #wenchaCharts
            width: 10.25rem
            height: 31vh  
            margin-bottom: 20px        
            .panel
                margin:0 auto
                text-align: center
                .bestCityTitle
                    width: 100%
                    height: 3vh
                    padding:5px
                    color:white
                    .doubleLine
                        width: .11rem
                        height: 1.9vh
                        .wide
                            width: .07rem
                            height: 1.9vh
                            background : #41E6FD
                        .narrow
                            width: .02rem
                            height: 1.9vh
                            background : #41E6FD
                            margin-left: .02rem
                    .bestCityName
                        font-size: .18rem
                        font-family: FZZXHJW--GB1-0
                        margin-left: .12rem
                        color:#fff
                .threeLine
                    width: 100%
                    height: .03rem
                    .firstLine
                        width: 9.4rem
                        height: .03rem
                        background : #41E6FD
                    .secondLine
                        width: .08rem
                        height: .03rem
                        background: rgba(255,255,255,.54)
                        margin-left: .06rem
                        margin-right: .04rem
                    .thirdLine
                        width: .64rem
                        height: .03rem
                        background: rgba(255,255,255,1)
                .xuanze
                    display:flex;
                    justify-content:space-around
                    padding-top:10px;
                    .search
                        width:83px
                        height:30px
                        border:2px solid #41e6fd
                        line-height: 25px
                        text-align: center
                        color:#ddd
                    .search:hover
                        background:#2185BB
                .tableHeader
                    background: rgba(68,109,126,1)
                    line-height: 24px
                    display:flex
                    color: #fff
                    justify-content : space-between
                    margin-top:20px
                    div
                        flex:1
                .activity
                    width:100%
                    height: 73vh
                    position: relative
                    ul
                        height: 73vh
                        top: 0px
                        padding: 0
                        color: #666
                        position: relative
                        li
                            display:flex
                            padding:0
                            font-size: 12px
                            line-height: 30px
                            list-style: none
                            border-top: 1px solid #59E1FE
                            justify-content :space-between
                            div 
                                color:#fff
                                flex:1
                                text-align:center
                            
                        li:hover
                            font-size:15px;
</style>




    
    